<script setup lang="tsx">

import { onMounted, reactive, ref } from 'vue';
import { PageEntity } from '@/entity/page.entity';
import { createRoleApi, deleteRoleApi, getRolePageApi, updateRoleApi } from '@/service/path/role';
import { useTable } from '@/hooks/common/table';
import { postAction } from '@/service/request/action';
import { useCrud } from '@/hooks/common/crud';
import RoleSearch from '@/views/system/role/modules/role-search.vue';
import RoleModal from '@/views/system/role/modules/role-modal.vue';
import AssignMenu from '@/views/system/role/modules/assign-menu.vue';
import { getMenuListApi } from '@/service/path/menu';

const assignMenuRef = ref();
const state = reactive({
  pageInfo: new PageEntity(),
  opPath: {
    createPath: createRoleApi,
    updatePath: updateRoleApi
  },
  menuList: []
});
const {
  columns,
  columnChecks,
  data,
  loading,
  mobilePagination,
  searchParams,
  getData,
  clickSearch,
  clickReset
} = useTable({
  apiFn: () => postAction(getRolePageApi, state.pageInfo),
  showTotal: true,
  immediate: true,
  apiParams: {
    name: '',
    remark: ''
  },
  pageInfo: state.pageInfo,
  columns: () => [
    {
      title: '序号',
      key: 'index'
    },
    {
      title: '角色名称',
      key: 'name'
    },
    {
      title: '备注',
      key: 'remark'
    },
    {
      title: '操作',
      key: 'action',
      render: (row: Api.Auth.Role) => <common-operate-column
        row-data={row} onClickEdit={row => clickEdit(row.id, row)}
        onClickDelete={row => clickDelete(row.id)}
        v-slots={{
          default: () => <>
            <n-button type="info" text onClick={() => clickAssignRole(row.id)}>分配权限</n-button>
          </>
        }}
      />
    }
  ]
});
const {
  modalFormRef, childRef, clickAdd, clickEdit, clickDelete
} = useCrud({
  uris: {
    delete: deleteRoleApi
  },
  refreshList: getData
});
const getMenuList = () => {
  postAction(getMenuListApi, {}).then(res => {
    if (!res.error) {
      state.menuList = res.data;
    }
  });
};
const clickAssignRole = (id: string) => {
  assignMenuRef.value.openDialog(id);
};
onMounted(() => {
  getMenuList();
});
</script>

<template>
  <div class="flex-col-stretch gap-16px lt-sm:overflow-auto">
    <RoleSearch v-model:model="searchParams" @click-reset="clickReset" @click-search="clickSearch" />
    <n-card title="角色列表" class="flex-1">
      <template #header-extra>
        <TableHeaderOperation
          v-model:columns="columnChecks"
          :loading="loading"
          @click-add="clickAdd"
        />
      </template>
      <n-data-table
        :columns="columns"
        :data="data"
        :loading="loading"
        remote
        :row-key="row => row.id"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </n-card>
    <CommonModal ref="modalFormRef" title="角色" :op-path="state.opPath" @refresh-list="getData">
      <RoleModal ref="childRef" />
    </CommonModal>
    <AssignMenu ref="assignMenuRef" :menu-list="state.menuList" />
  </div>
</template>

<style scoped>

</style>
